| Ajax（异步加载技术） | 您所在的位置：网站首页 › setvalues formily 异步加载 › Ajax（异步加载技术） |
Ajax（异步加载技术）
|
文章目录
Ajax简介同步方式发送请求与异步方式发送请求的区别
js原生ajax使用jQuery框架ajax使用GET请求方式与Post请求方式AJAX请求方式扩展：jQuery ajax - serialize() 方法
json解析JS中的json数据解析
Ajax应用案例检测用户名是否已经被注册仿百度搜索提示
Ajax简介
传统的网页（不使用 Ajax）如果需要更新内容，必须重新加载整个网页页面。Ajax技术可以实现在不重新加载整个网页的情况下，对网页的某部分进行更新（和服务端进行交互）。Ajax技术可以说是 局部刷新技术 或 异步加载技术。
同步方式发送请求与异步方式发送请求的区别
同步：发送一个请求，需要等待响应返回，然后才能够发送下一个请求，如果该请求没有响应，不能发送下一个请求，客户端会处于一直等待过程中。异步：发送一个请求，不需要等待响应返回，随时可以再发送下一个请求，不需要等待。
js原生ajax使用
步骤：
-1.创建一个Ajax引擎对象
-2.使用事件监听Ajax引擎的状态变化,为Ajax引擎对象绑定监听
-3.设置请求的信息,绑定提交地址
-4.发送请求
//1.创建Ajax引擎对象
var xmlhttp = new XMLHttpRequest();
//2.绑定事件，监听Ajax引擎的状态变化
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState === 4){ //服务端已经响应完成
if(xmlhttp.status === 200){ //服务端是正常响应的
//接受响应数据
var result = xmlhttp.responseText;
}
}
}
//3.设置请求的信息： 请求方式 请求资源 是否异步
xmlhttp.open("get", "ajaxServlet", true);
//4.发送请求
xmlhttp.send();
jQuery框架ajax使用
GET请求方式与Post请求方式
jQuery.get(url, params, callback, resultType) jQuery.post(url, params, callback, resultType) 参数说明： url：请求的服务器端url地址，必须有 params：请求的参数，可无可有。有两种写法： "username=admin&password=123"{username: "admin", password: "123"}callback：用于处理服务端响应结果的匿名函数对象 function(result){ //result：服务端响应回来的数据值 }resultType：服务端响应回来的数据类型。默认是text（string类型），如果指定了json，那么callback里的result值就是json对象 示例： $Title$ 响应结果显示 //GET请求方式 // $("#bu1").click(function () { // $.get("test","username=admin",function (result) { // $("#div1").html(result) // },"text") // }) //Post请求方式 $("#bu1").click(function () { $.post("test","username=admin ",function (result) { $("#div1").html(result) }) }) AJAX请求方式jQuery.ajax({key:value, key:value, …}) key（属性名称）valueurl请求的服务器端url地址，必须有data发送到服务器的数据。格式username=tom&password=123或 {username: "admin", password: "123"}type请求方式，默认为GETdataType服务端返回的数据类型，取值可以是 xml, html, json, text等sucess请求成功后的回调函数,同GET请求方式与Post请求方式的参数callbackasync是否异步。默认是true示例： $Title$ 响应结果显示 $("#bu1").click(function () { $.ajax({ url:"test", data: "username=admin", type: "post", dataType: "text", success: function (result) { $("#div1").html(result); }, async: false }); })以上方式请求时将执行的Servlet： @WebServlet(name = "Servlet01",urlPatterns = "/test") public class Servlet01 extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=utf-8"); String username = request.getParameter("username"); response.getWriter().write("username="+username); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request,response); } }运行结果： serialize() 方法通过序列化表单值，创建 URL 编码文本字符串，即把表单的数据转换成字符串的格式，形如username=admin&password=123&...，序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。 如表单提交时通过ajax方式提交，jQuery.post(url, params, callback, resultType)中请求的参数params可通过表单jQuery对象.serialize();获得，特别是表单中参数很多时，使用这个方法，可快速拼接参数。 代码示例： table { width: 30%; margin:auto; position: absolute; right: 0; left: 0; } 用户名 密码 $("#empForm").validate({ submitHandler:function(){//校验通过后，表单不提交，执行function里的代码 //序列化表单值 var params = $("#empForm").serialize(); alert(params); }, rules:{//配置表单项校验的规则 username:{ required: true }, pwd:{ required: true } }, messages:{//配置对应的表单项校验失败后的错误提示信息 username:{ required: "请输入用户名" }, pwd:{ required: "请输入密码" } } })
json的基本语法，json转换技术（ jsonlib， gson，fastjson，Jackson） JS中的json数据解析方法： var value = json对象.key var value = 数组对象[索引].key 示例： 示例1: json格式 {key:value , key:value} //json的定义 var person = {"name":"张三","age":18}; //json解析 alert(person.name); //张三 alert(person.age); //18 示例2: json格式 [{key:value,key:value} , {key:value,key:value}] var obj = [{"name":"张三", "age":18},{"name":"李四", "age":17}]; var v = obj[1].name; alert(v);//张三 示例3: json格式 {"param" : [{key:value,key:value},{key:value,key:value}] } var obj= {"user": [{"name": "刘备", "age": "22"}, {"name": "关羽", "age": "20"},{"name": "张飞", "age": "21"}]}; var v = obj.user[0].name; alert(v);//刘备 示例4: json格式 {"param1":"value1", "param2":{} , "param3":[{key:value,key:value},{key:value,key:value}] } var obj = { "name":"刘备", "info": { "sex":"男", "age":40, "address":"河北" }, "son":[ {"name": "刘封", "age": "21"}, {"name": "刘禅", "age": "18"}, {"name": "刘永", "age": "18"} ] }; var v = obj.son[0].name;//刘封 var v = obj.info.address;//河北 Ajax应用案例 检测用户名是否已经被注册 仿百度搜索提示 |
【本文地址】
公司简介
联系我们